*{margin:0;padding: 0;}
.content{
    width:600px;
    height:400px;
    border:1px solid #666;
    margin:50px auto;
    position: relative;
    overflow:hidden;
}
.pics img{
    position: absolute;
 
  
}
.pics img{
    z-index:100;
}
 button{
    cursor: pointer;
    width:40px;
    height:70px;
    border:none;
    background: url("../images/icon-slides.png");
    position:absolute;
    z-index: 200;
}
.position-center-y{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}
.next{

    right:0;
    background-position-x: -124px;
}
.prev{
    background-position-x: -83px;
}
.prev:hover{
    background-position-x:0px;
}
.next:hover{
    background-position-x:-42px;
}
.all-icons{
    
    position: absolute;
    z-index: 300;
    bottom: 20px;
    left:50%;
    transform: translateX(-50%);
}
.all-icons span{
    margin-bottom: 5px;
    cursor: pointer;
    display: inline-block;
    width:20px;
    height:20px;
    border: 2px solid rgb(167,169,179);
    border-radius: 50%;
    background-color: rgb(128, 133, 134);
}
.all-icons .active{
    background: orangered;
}